<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    <script src="../lib/ajax.js"></script>
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>

    <style>
        .box1 {
            width: 60%;
            border: 1px solid darkorchid;
            border-radius: 10px;
            padding: 20px;
        }

        .router-link-exact-active {
            color: deeppink;
            border: 1px solid deepskyblue;
            padding: 5px;
            border-radius: 5px;
            background: darkslateblue;
        }

        .box2 {
            width: 60%;
            border: 1px solid darkorange;
            border-radius: 10px;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2> {{title }}</h2>
        <myhead></myhead>
        <hr>
        <!-- 5.路由出口 加载路由组件的地方  -->
        <router-view class="box1"></router-view>

        <!-- 6. 路由导航  -->


    </div>
    <template id="head">
        <header>
            WH2110-DAYDAYUP
        </header>
    </template>

    <template id="main">
        <div>
            <h2> main - mian - 微信主视图 </h2>

            <router-view class="box2"></router-view>
            <myfoot></myfoot>
        </div>
    </template>

    <template id="wechat">
        <div>
            <h2> wechat - wechat - 微信聊天 </h2>
        </div>
    </template>

    <template id="contact">
        <div>
            <h2> contact - contact - 通讯录 </h2>
            <p v-for="(l,i) in songers" :key="i">
                <router-link :to="{name:'detail',query:{...l}}"> {{l.name}}</router-link>
            </p>

        </div>
    </template>

    <template id="find">
        <div>
            <h2> find - find - 朋友圈 </h2>
        </div>
    </template>

    <template id="mine">
        <div>
            <h2> mine - mine - 我的信息 </h2>
        </div>
    </template>

    <template id="notfound">
        <div>
            <h2>notfound - notfound - 404 </h2>
        </div>
    </template>

    <template id="detail">
        <div>
            <h2>联系人 --- detail - <button @click="$router.go(-1)">返回</button> </h2>
            <h2>name == {{$route.query.name}}</h2>
            <img width="300" height="300" :src="$route.query.picUrl" alt="">

        </div>
    </template>

    <template id="foot">
        <footer>
            <router-link :to="{name:l.name}" v-for="(l,i) in footlist" :key="i">
                {{l.text}}
            </router-link>
        </footer>
    </template>
</body>
<script>
    // 0.如果使用模块机制编程，导入Vue和VueRouter，要调用Vue.use（VueRouter）
    Vue.component("myhead", {
        template: "#head"
    })
    Vue.component("myfoot", {
        template: "#foot",
        data() {
            return {
                footlist: [
                    { path: 'wechat', name: 'wechat', text: "微信" },
                    { path: 'contact', name: 'contact', text: "通讯录" },
                    { path: 'find', name: 'find', text: "发现" },
                    { path: 'mine', name: 'mine', text: "我的" },
                ]
            }
        }
    })
    // 1.定义（路由）组件
    const Main = {
        template: "#main"
    }
    const Wechat = {
        template: "#wechat"
    }
    const Contact = {
        template: "#contact",
        data() {
            return {
                songers: []
            }
        },
        mounted() {
            ajax({
                type: "get",
                url: "http://47.104.209.44:3333/artist/list",
                dataType: "json",
                success: res => {
                    this.songers = res.artists
                    console.log(res);
                }
            })
        }
    }
    const Find = {
        template: "#find"
    }
    const Mine = {
        template: "#mine",
        beforeRouteEnter(to, from, next) {
            console.log('beforeRouteEnter 进入当前路由组件')

            next()
        },
        beforeRouteUpdate(to, from, next) {
            console.log('beforeRouteUpdate 更新当前路由组件')
            next()
        },
        beforeRouteLeave(to, from, next) {
            console.log('beforeRouteLeave 离开当前路由组件')
            next()
        }
    }
    const NotFound = {
        template: "#notfound"
    }
    const Detail = {
        template: "#detail"
    }
    // 2.定义路由   （定义路由里面组件和地址路径的映射关系）
    const routes = [
        {
            path: "/",
            redirect: "/main"
        },
        {
            path: "/main",
            name: "main",
            component: Main,
            redirect: "/main/wechat",
            children: [
                { path: 'wechat', name: 'wechat', component: Wechat },
                { path: 'contact', name: 'contact', component: Contact },
                { path: 'find', name: 'find', component: Find },
                { path: 'mine', name: 'mine', component: Mine },
            ]
        },
        {
            path: "/detail",
            name: "detail",
            component: Detail,
            beforeEnter: (to, from, next) => {   // 路由独享的守卫
                console.log("beforeEnter  某个路由独享的守卫");
                next()
            }
        },
        {
            path: "/404",
            name: 'notFound',
            component: NotFound
        },
        {
            path: "*",
            redirect: { name: 'notFound' }
        }
    ]
    // 3.创建路由对象

    const router = new VueRouter({
        routes,
        base: "",
        mode: "hash",
        scrollBehavior: () => {   // 监听路由页面的滚动行为 

        }
    })

    router.beforeEach((to, from, next) => {
        console.log(to);
        console.log(from);
        console.log("beforeEach  全局前置守卫");
        next()   // next(false)

    })

    router.afterEach((to, from) => {
        console.log("afterEach  已经进入当前的路由");
    })


    // base 应用的基路径 一般不用设置 采用的相对路径  上线的时候才需要单独去设置路径
    // mode 路由模式
    // hash url地址的 hash模式 兼容性强 带#号 可以刷新浏览器 但是地址比较长 不简洁
    // history 不带#号 不能刷新浏览器（需要服务器重定向404） 比较简洁优雅 依赖 HTML5 History API 和服务器配置7 
    // 4.挂载到根实例
    const vm = new Vue({
        router,
        el: "#app",
        data: {
            title: "Vue 路由的初步学习 "
        },
        watch: {
            '$route': function (to, from) {
                // console.log(to)   // 即将进入的路由
                // console.log(from) // 即将离开的路由 
            }
        },
        mounted() {
            console.log(this.$router)  // router 路由对象  负责路由切换 重定向
            console.log(this.$route)   // 路由信息对象  记录当前激活路由的相关数据信息  (参数 params query meta )
        }


    })
</script>

<!-- 
    嵌套路由    路由嵌套组件
    你有多少层嵌套就写多少个  router-view

    配置简单  路由

    路由守卫  阻止你进入或者离开当前路由

    用来判断时候可以进入或者离开当前路由

    路由导航守卫    分三种
    a.  全局前置守卫  router.beforeEach(to,from,next)
        全局后置守卫  router.afterEach(to,from)

    b.  路由独享的守卫 beforeEnter(to,from,next)    进入当前路由之前触发

    c.  路由组件内直接定义以下路由导航守卫  component
        beforeRouteEnter    进入这个组件之前
        beforeRouteUpdate   组件数据更新
        beforeRouteLeave    离开这个组件之前

 -->


</html>